

<template>
  <div id="app">
    <loading v-model="isLoading"></loading>
    <router-view></router-view>

  </div>
</template>

<script>
  import { Loading } from 'vux'
  import { mapState } from 'vuex'

  export default {
    components: {
      Loading
    },
    computed: {
      ...mapState({
          isLoading: state => state.isLoading
      })
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    height: 100%;
    color: #2c3e50;
  }

  html {
    box-sizing: border-box;
  }
  html, body, #app {
    background-color: #fff;
  }

  .fade-enter-active {
    transition: all .1s ease;
  }

  .fade-leave-active {
    transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .fade-enter, .fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(-10px);
    opacity: 0;
  }
</style>

